<template>
    <div class="energy-ball" :style="ballStyle" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
        <div class="inner-glow"></div>
        <div class="pulse-effect"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const isHovered = ref(false)

// 响应式尺寸
const size = computed(() => isHovered.value ? 110 : 100)

// 动态样式计算
const ballStyle = computed(() => ({
  width: `${size.value}px`,
  height: `${size.value}px`,
  backgroundImage: `url('../../resources/ball.png')`, 
  backgroundSize: 'cover' as const, 
  boxShadow: `0 0 20px ${isHovered.value ? 'rgba(0, 102, 255, 0.7)' : 'rgba(0, 102, 255, 0.4)'}`,
  position: 'fixed' as const, 
  bottom: '20px',
  right: '20px'
}))
</script>

<style scoped lang="scss">
.energy-ball {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    cursor: pointer;
    z-index: 100;

    &:hover {
        transform: scale(1.05);
    }

    .inner-glow {
        position: absolute;
        width: 70%;
        height: 70%;
        border-radius: 50%;
        background: radial-gradient(circle at center,
                rgba(255, 255, 255, 0.5) 0%,
                transparent 70%);
    }

    .pulse-effect {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.7);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(0, 102, 255, 0.7);
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 12px rgba(0, 102, 255, 0);
        }

        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(0, 102, 255, 0);
        }
    }
}
</style>